<template>
  <div class="app-container">
    <!--    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">-->
    <!--      <el-form-item label="赛项名称" prop="roleName">-->
    <!--        <el-input v-model="queryParams.roleName" placeholder="请输入赛项名称" clearable style="width: 240px"-->
    <!--                  @keyup.enter="handleQuery"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="赛事名称" prop="roleKey">-->
    <!--        <el-input v-model="queryParams.roleKey" placeholder="请输入赛事名称" clearable style="width: 240px"-->
    <!--                  @keyup.enter="handleQuery"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="状态" prop="status">-->
    <!--        <el-select v-model="queryParams.status" placeholder="状态" clearable style="width: 240px">-->
    <!--          <el-option v-for="dict in sys_declare_type" :key="dict.value" :label="dict.label" :value="dict.value"/>-->
    <!--        </el-select>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>-->
    <!--        <el-button icon="Refresh" @click="resetQuery">重置</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="申请编号" prop="id" width="80"/>
      <el-table-column label="赛事名称" prop="eventName" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="赛项名称" prop="competitionName" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="主办方" prop="organizers" width="100" align="center"/>
      <el-table-column label="比赛方式" prop="raceType" width="100" align="center"/>
      <el-table-column label="赛道" prop="track" align="center" min-width="120"/>
      <!--      <el-table-column label="状态" prop="stageCurrentStatus" width="100" align="center">-->
      <!--        <template #default="scope">-->
      <!--          <dict-tag :options="sys_declare_type" :value="scope.row.stageCurrentStatus"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="300">
        <template #default="scope">
          <el-tooltip content="人员信息填报" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleLook(scope.row)"
            >查看人员信息
            </el-button>
          </el-tooltip>
          <el-tooltip content="上报" placement="top">
            <el-button link type="primary" icon="Upload" @click="handleReport(scope.row)"
            >上报
            </el-button>
          </el-tooltip>
          <el-tooltip content="放弃比赛" placement="top">
            <el-button link type="danger" icon="Delete" @click="handleGiveup(scope.row)"
            >放弃比赛
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize" @pagination="getList"/>

    <!-- 查看人员信息 -->
    <el-dialog :title="title" v-model="open" width="1300px" append-to-body>
      <el-form ref="postRef" :model="tableList" disabled label-width="100px" :inline="true">
        <el-form-item label="赛事名称:" prop="eventName">
          <template #default="scope">
            <dict-tag :options="sys_event_value" :value="tableList.item.eventName"/>
          </template>
        </el-form-item>
        <el-form-item label="赛项名称:" prop="competitionName">
          <el-text>{{ tableList.item.competitionName }}</el-text>
        </el-form-item>
        <el-form-item label="赛道:" prop="track">
          <template #default="scope">
            <dict-tag :options="sys_track_type" :value="tableList.item.track"/>
          </template>
        </el-form-item>
        <el-form-item label="主办方:" prop="organizers">
          <el-text>{{ tableList.item.organizers }}</el-text>
        </el-form-item>
        <el-form-item label="比赛方式:" prop="raceType">
          <template #default="scope">
            <dict-tag :options="sys_race_type" :value="tableList.item.raceType"/>
          </template>
        </el-form-item>
        <el-form-item label="创建时间:" prop="createTime">
          <el-text>{{ tableList.item.createTime }}</el-text>
        </el-form-item>
        <el-divider/>
        <el-table :data="tableList.tableData" style="width: 100%" :rules="rules" border>
          <el-table-column type="index" label="编号" width="70px"/>
          <el-table-column label="选手姓名" width="200px" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.nameStudent`" :rules="rules.nameStudent" align="center">
                <el-input v-model="scope.row.nameStudent" placeholder="选手姓名" style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="200px" prop="numberPhoneStudent" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.numberPhoneStudent`" :rules="rules.numberPhoneStudent">
                <el-input v-model="scope.row.numberPhoneStudent" placeholder="联系方式"
                          style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" width="250px" prop="identityCard" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.identityCard`" :rules="rules.identityCard">
                <el-input v-model="scope.row.identityCard" placeholder="身份证号码" style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="学号" width="200px" prop="numberId" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.numberId`" :rules="rules.numberId">
                <el-input v-model="scope.row.numberId" placeholder="学号" style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="专业" width="200px" prop="major" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.major`" :rules="rules.major">
                <el-input v-model="scope.row.major" placeholder="专业" style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="指导老师姓名" width="200px" prop="nameTeacher" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.nameTeacher`" :rules="rules.nameTeacher">
                <el-input v-model="scope.row.nameTeacher" placeholder="指导老师姓名"
                          style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="指导老师部门" width="200px" prop="deptId" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.deptId`" :rules="rules.deptId" label-width="150px">
                <el-input v-model="scope.row.deptName" placeholder="指导老师部门" style="margin-top: 20px"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="指导老师手机号" width="200px" prop="numberPhoneTeacher" align="center">
            <template #default="scope">
              <el-form-item :prop="`tableData.`+scope.$index+`.numberPhoneTeacher`" :rules="rules.numberPhoneTeacher">
                <el-input v-model="scope.row.numberPhoneTeacher" placeholder="指导老师联系方式"
                          style="margin-top: 20px"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup name="Mydeclare">
import {staffList, report, giveUp, declareById, staffReport} from '@/api/contestment/mydeclare'
import {listDept, getRaceTeam} from "@/api/contestment/_enlists";
import {reactive, ref} from "vue";

const router = useRouter();
const {proxy} = getCurrentInstance();
const {
  sys_race_type,
  sys_track_type,
  sys_event_value
} = proxy.useDict("sys_race_type", "sys_track_type", "sys_event_value");
const dataList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");
const tableList = ref({
  item: {
    eventName: '',
    competitionName: '',
    track: '',
    raceType: '',
    createTime: ''
  },
  tableData: [
    {
      deptId: '',
      identityCard: '',
      major: '',
      nameStudent: '',
      nameTeacher: '',
      numberId: '',
      numberPhoneStudent: '',
      numBerPhoneTeacher: '',
    }
  ]
})
const rules = reactive({
  nameStudent: [{required: true, message: '选手名称不能为空', trigger: 'blur'}],
  identityCard: [
    {
      required: true, message: '身份证号不能为空', trigger: 'blur'
    },
    // {
    //   pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message:'请输入正确的身份证'
    // }
  ],
  major: [{required: true, message: '专业不能为空', trigger: 'blur'}],
  deptId: [{required: true, message: '部门不能为空', trigger: 'change'}],
  nameTeacher: [{required: true, message: '指导老师姓名不能为空', trigger: 'blur'}],
  numberId: [{required: true, message: '学号不能为空', trigger: 'blur'}],
  numberPhoneStudent: [
    {
      required: true, message: '选手联系方式不能为空', trigger: 'blur'
    },
    {
      pattern: /^1[3-9]\d{9}$/, message: '填写正确的联系方式'
    }
  ],
  numberPhoneTeacher: [
    {
      required: true, message: '老师联系方式不能为空', trigger: 'blur'
    },
    {
      pattern: /^1[3-9]\d{9}$/, message: '填写正确的联系方式'
    }
  ],
})
let raceId = ref(undefined);
const deptOptions = ref(undefined);
const data = reactive({
  queryParams: {
    pageNo: 1,
    pageSize: 10,
  },
});

const {queryParams} = toRefs(data);

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 获取我的人员申报列表数据 */
function getList() {
  loading.value = true;
  staffList(proxy.addDateRange(queryParams.value)).then((res) => {
    loading.value = false;
    total.value = res.data.total;
    dataList.value = res.data.result;
  });
}

//查看人员信息
function handleLook(row) {
  raceId = row.id
  getRaceTeam(raceId).then(response => {
    tableList.value.item = response.data.result.contest
    if (response.data.result.persons === null) {
      ElMessage.error("您还未报名，无法查看人员信息")
    } else {
      tableList.value.tableData = response.data.result.persons
      listDept(queryParams.value).then(response => {
        deptOptions.value = proxy.handleTree(response.data.result, "id");
      })
      title.value = "信息修改"
      open.value = true
    }
  })
}

/** 取消按钮*/
function cancel() {
  open.value = false;
  reset();
}


/** 上报 */
function handleReport(row) {
  const contestIds = row.id || ids.value;
  proxy.$modal.confirm(`确定提交${contestIds}的数据`).then(function () {
    return staffReport(contestIds);
  }).then(res => {
    getList();
    proxy.$modal.msgSuccess("提交成功")
  }).catch(() => {
  });
}

/** 上报 */
function handleGiveup(row) {

}

getList()
</script>

